<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .banner {
            width: 576px;
            height: 360px;
            position: relative;
            margin: 100px auto;
        }

        .box {
            width: 100%;
            height: 100%;

        }

        .box img {
            width: 100%;
            left: 0;
            opacity: 0;
            position: absolute;
            transition: all 0.5s;
        }

        .box .active {
            opacity: 1;
        }

        ul {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            list-style: none;
            bottom: 10px;
        }

        ul>li {
            width: 10px;
            height: 10px;
            background-color: rgb(252, 224, 229);
            border-radius: 50%;
            margin-right: 10px;
            float: left;
            transition: all 0.5s;
        }

        ul .active {
            background-color: rgb(250, 44, 78);
        }

        .left {
            width: 20px;
            height: 30px;
            background-color: aqua;
            text-align: center;
            line-height: 30px;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .right {
            width: 20px;
            height: 30px;
            background-color: aqua;
            text-align: center;
            line-height: 30px;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>

<body>
    <div class="banner swiper">
        <div class="box">
        </div>
        <ul>
        </ul>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
    </div>
    <div class="banner swiper2">
        <div class="box">
        </div>
        <ul>
        </ul>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
    </div>
</body>

</html>
<script>
    class swiper {
        constructor(banner, arr) {
            this.banner = document.querySelector(banner)
            this.right = document.querySelector('.right')
            this.left = document.querySelector('.left')
            this.arr = arr
            // 图片下标
            this.index = 0

            this.render()
            this.autoplay()
            this.clickRight()
            this.clickLeft()
            this.clickDot()
            this.start()
            this.stop()
        }
        // 方法
        render() {
            var str = ''
            var str2 = ''
            for (let i = 0; i < this.arr.length; i++) {
                str += `<img src="${this.arr[i]}">`
                str2 += `<li></li>`

            }
            this.banner.querySelector('.box').innerHTML = str
            this.banner.querySelector('ul').innerHTML = str2
            // console.log(this.swiper.querySelector('img'));
            this.banner.querySelector('img').classList.add('active')
            this.banner.querySelector('li').classList.add('active')
            this.imgs = this.banner.querySelectorAll('img')
            this.lis = this.banner.querySelectorAll('li')
        }
        // 自动轮播
        autoplay() {
            this.dong = setInterval(() => {
                for (let i = 0; i < this.arr.length; i++) {
                    this.imgs[i].classList = ''
                    this.lis[i].classList = ''
                }

                // console.log(this.index);
                this.imgs[this.index].classList = 'active'
                this.lis[this.index].classList = 'active'
                this.index++
                if (this.index > this.arr.length - 1) {
                    this.index = 0
                }
            }, 1000)
        }
        // 点击切换下一张
        clickRight() {
            this.right.onclick = () => {
                this.imgs[this.index].className = ''
                this.lis[this.index].className = ''
                this.index++
                if (this.index > this.arr.length - 1) {
                    this.index = 0
                }
                this.imgs[this.index].classList.add('active')
                this.lis[this.index].classList.add('active')
            }
        }
        // 点击切换上一张
        clickLeft() {
            this.left.onclick = () => {
                this.imgs[this.index].className = ''
                this.lis[this.index].className = ''
                this.index--
                if (this.index < 0) {
                    this.index = this.arr.length - 1
                }
                this.imgs[this.index].classList.add('active')
                this.lis[this.index].classList.add('active')
            }
        }
        // 点击小圆点
        clickDot() {

            for (let i = 0; i < this.lis.length; i++) {
                this.lis[i].onclick = () => {
                    this.index = i
                    for (var j = 0; j < this.imgs.length; j++) {
                        this.imgs[j].className = ''
                        this.lis[j].className = ''
                    }
                    console.log(this.imgs[i]);
                    this.imgs[i].classList.add('active')
                    this.lis[i].classList.add('active')
                }
            }
        }
        // 鼠标划入停止轮播
        stop(){
            this.banner.onmousemove=()=>{
                clearInterval(this.dong)
            }
        }
        // 划出开始轮播
        start() {
            this.banner.onmouseout=()=>{
                
                this.autoplay()
            }
        }


    }
    var arr = ['./imgs/0.jpg', './imgs/1.jpg', './imgs/2.jpg', './imgs/3.jpg', './imgs/4.jpg', './imgs/5.jpg', './imgs/6.jpg', './imgs/7.jpg']
    var s = new swiper('.swiper', arr)
    var arr2 = ['./imgs/0.jpg', './imgs/1.jpg', './imgs/2.jpg', './imgs/3.jpg', './imgs/4.jpg', './imgs/5.jpg']
    var s2 = new swiper('.swiper2',arr2)
</script>